<script setup>
import "quarkd/lib/tab";
import "quarkd/lib/navbar";
import "quarkd/lib/form";
import "quarkd/lib/field";
import "quarkd/lib/button";
import Toast from "quarkd/lib/toast";

import { ref, inject } from 'vue';
import { useRouter } from 'vue-router';
import { useLoginedStore } from '@/stores/logined';

const store = useLoginedStore();

// 注入由整个应用提供的数据
const $http = inject('$http');

const active = ref('tel');
const telForm = ref(null);
const emailForm = ref(null);
const accountForm = ref(null);

const router = useRouter();

function tabChange({detail}) {
  active.value = detail.name;
}

function loginByTel() {
  const fields = telForm.value.getFormData();
  const { tel, password } = fields;
  if( tel == undefined ) {
    Toast.text( `请输入手机号` );
    return;
  }
  if( password == undefined ) {
    Toast.text( '请输入密码' );
    return;
  }
  $http.post(`/backapi/user/login/tel`, {
    tel,
    password
  }).then( resp => {
    const { success, message } = resp.data;
    if( success ) {
      // 获得由服务器颁发的令牌
      const token = resp.data.token;
      // 将令牌保存到本地
      store.set(token); // 调用 Store 中的 Action 保存 token
      // 去往登录成功后的页面
      router.push({ name: 'main' });
      return;
    }
    Toast.text( message );
  }).catch( err => {
    Toast.text( err );
  });
}

function loginByEmail() {
  const fields = emailForm.value.getFormData();
  const { email, password } = fields;
  if( email == undefined ) {
    Toast.text( `请输入邮箱` );
    return;
  }
  if( password == undefined ) {
    Toast.text( '请输入密码' );
    return;
  }
  $http.post(`/backapi/user/login/email`, {
    email,
    password
  }).then( resp => {
    const { success, message } = resp.data;
    if( success ) {
      // 获得由服务器颁发的令牌
      const token = resp.data.token;
      console.log( token );
      // 将令牌保存到本地
      store.set(token); // 调用 Store 中的 Action 保存 token
      // 去往登录成功后的页面
      router.push({ name: 'main' });
      return;
    }
    Toast.text( message );
  }).catch( err => {
    Toast.text( err );
  });
}

function loginByAccount() {
  const fields = accountForm.value.getFormData();
  const { account, password } = fields;
  if( account == undefined ) {
    Toast.text( `请输入账号` );
    return;
  }
  if( password == undefined ) {
    Toast.text( '请输入密码' );
    return;
  }
  $http.post(`/backapi/user/login/account`, {
    account,
    password
  }).then( resp => {
    const { success, message } = resp.data;
    if( success ) {
      // 获得由服务器颁发的令牌
      const token = resp.data.token;
      console.log( token );
      // 将令牌保存到本地
      store.set(token); // 调用 Store 中的 Action 保存 token
      // 去往登录成功后的页面
      router.push({ name: 'main' });
      return;
    }
    Toast.text( message );
  }).catch( err => {
    Toast.text( err );
  });
}

function noop(){
  // No Operation
}
</script>

<template>
  <!--顶部标题-->
  <quark-navbar title="用户登录" lefthide closehide />
  <div class="wrapper">
    <!--注册表单-->
    <quark-tabs :activekey="active" @change="tabChange">
        <quark-tab-content label="手机号" name="tel">
          <!--用手机号注册-->
          <quark-form ref="telForm">
            <quark-field name="tel" label="手机号" placeholder="请输入手机号" @change.stop="noop" />
            <div class="line" />
            <quark-field name="password" type="password" label="登录密码" placeholder="请输入密码" @change.stop="noop" />
            <div class="line" />
            <div class="button-wrap">
              <div class="button" @click="loginByTel">登录</div>
            </div>
          </quark-form>
        </quark-tab-content>
        <quark-tab-content label="邮箱" name="email">
          <!--用邮箱注册-->
          <quark-form ref="emailForm">
            <quark-field name="email" label="邮箱" placeholder="请输入邮箱" @change.stop="noop" />
            <div class="line" />
            <quark-field name="password" type="password" label="登录密码" placeholder="请输入密码" @change.stop="noop" />
            <div class="line" />
            <div class="button-wrap">
              <div class="button" @click="loginByEmail">登录</div>
            </div>
          </quark-form>
        </quark-tab-content>
        <quark-tab-content label="账号" name="account">
          <!--注册新账号-->
          <quark-form ref="accountForm">
            <quark-field name="account" label="账号" placeholder="请输入账号" @change.stop="noop" />
            <div class="line" />
            <quark-field name="password" type="password" label="登录密码" placeholder="请输入密码" @change.stop="noop" />
            <div class="line" />
            <div class="button-wrap">
              <div class="button" @click="loginByAccount">登录</div>
            </div>
          </quark-form>
        </quark-tab-content>
    </quark-tabs>
  </div>
</template>

<style scoped>
.wrapper {
  margin: 15px;
}
.line {
  height: 1px;
  background: #dfdfdf;
}
.button-wrap {
  padding: 4.26667vw;
  background: #fff;
}
.button {
  border-radius: 1vw;
  height: 10vw;
  line-height: 10vw;  
  font-size: var(--field-label-font-size, 4vw);
  color: #fff;
  text-align: center;
  background: #66f;
}
</style>